<script setup>
	import {onMounted} from 'vue';
	import * as echarts from "echarts";
	import {ref} from "vue";
	import {chartApi} from "@/api/chart.js";
	
	const chartRef=ref()
	
	//页面加载完执行
	onMounted(()=>{
		// echarts.init(document.getElementById('myChart'));
		const myChart=echarts.init(chartRef.value)
		chartApi.selectTypeCount().then(result=>{
			if(result.code==0){
				var option = {
					title: {
						text: 'Referer of a Website',
						subtext: 'Fake Data',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [
						{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							data: result.data,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				myChart.setOption(option);
			}
		})
		
	})
</script>

<template>
	<div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<style scoped>

</style>